<template>
    <div id="app" class="page_sendfull">
        <div class="send_full">
          <div class="totle">{{momey | money}}</div>

          <div class="top_title">
            <div class="item_title"><h4>活动累计投资<span>280万元</span></h4></div>
            <div class="item_name"><span class="name">送IPhone X 64g</span></div>
          </div>
        </div>

        <div class="content">
          <div class="item" v-bind:key="item.src" v-for="item in itemlist">
            <img :src="item.src"/>
            <div class="item_title"><h4>活动累计投资<span>{{item.money}}万元</span></h4></div>
            <div class="item_name"><span class="name">{{item.name}}</span></div>
          </div>
        </div>
      <div class="copyright">本活动最终解释权归优选金融所有</div>
      <div class="rules" @click="show">活动规则</div>
      <mt-popup
        v-model="popupVisible" modal="true" closeOnClickModal="false">
        <div class="rules_content">
          <h3>活动规则</h3>
          <div class="des">
            1. 活动时间：2017年12月12日00:00-12月18日24:00；<br/>
            2. 参与方式：投资“优选计划”的30天标的的产品（不与“新手标”活动同享），按照活动期间投资总额计算最终奖品；<br/>
            3. 活动奖品价值仅标仅限参考，奖品（含现金红包）在活动结束后的3-7个工作日内发放或寄出，活动期间内累计投资500,000元以上的用户，优选金融会主动致电联系您，为您派送相关奖品；<br/>
            4. 每个投资账户仅限领取1份奖品，如发现任何作弊行为，取消一切奖品及奖励；<br/>
            5. 对活动有任何疑问，敬请咨询优选金融客服热400-690-1588。
          </div>
          <div class="replenishment">
            *在法律允许范围内，优选金融保留对本次活动的最终解释权。<br/>
            优选金融所有奖品及活动均与苹果公司无关。<br/>
            活动仅成年人可参与，投资有风险，理财需谨慎。<br/>
          </div>
          <div class="close" @click="close">
            <img src="../../public/imgs/send_full/close.png"/>
          </div>
        </div>
      </mt-popup>

    </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      momey: 0,
      popupVisible: false,
      itemlist: [
        {
          src: require("@/public/imgs/send_full/item_1.png"),
          name: "送iPad Pro 10.5 英寸",
          money: "180"
        },
        {
          src: require("@/public/imgs/send_full/item_2.png"),
          name: "送松下空气净化器",
          money: "120"
        },
        {
          src: require("@/public/imgs/send_full/item_3.png"),
          name: "送Au9999福字金条10g",
          money: "100"
        },
        {
          src: require("@/public/imgs/send_full/item_4.png"),
          name: "送苹果手表 Series 3",
          money: "80"
        },
        {
          src: require("@/public/imgs/send_full/item_5.png"),
          name: "送摩飞全自动咖啡机",
          money: "60"
        },
        {
          src: require("@/public/imgs/send_full/item_6.png"),
          name: "送科沃斯智能扫地机器人",
          money: "50"
        }
      ]
    };
  },
  methods: {
    getMoney() {
      this.Uitis
        .getInfo()
        .then(res => {
          if (res.uId == "") {
            return;
          } else {
            return this.$http.post(this.Interface.getInvestAmount, {
              sessionid: res.sessionid
            });
          }
        })
        .then(res => {
          if (res.data.success) {
            this.momey = res.data.data.totalMoney;
          } else {
            this.momey = 0;
            this.Toast({
              message: res.data.msg,
              position: "top",
              duration: 2000
            });
          }
        })
        .catch(err => {
          // alert(JSON.stringify(err));
          console.log(err);
        });
    },
    show() {
      this.popupVisible = true;
    },
    close() {
      this.popupVisible = false;
    }
  },
  created() {
    this.getMoney();
    this.$watch("popupVisible", function(newValue, oldValue) {
      if (newValue) {
        document.addEventListener("touchmove", function(e) {
          e.preventDefault();
        });

        document.getElementById("app").style.overflow = "hidden";
        document.getElementById("app").style.height = "100vh";
      } else {
        document.addEventListener(
          "touchmove",
          function(e) {
            e.returnValue = true;
          },
          false
        );
        document.getElementById("app").style.overflow = "";
        document.getElementById("app").style.height = "100%";
      }
    });
  }
};
</script>
<style lang="less">
.page_sendfull {
  width: 100%;
  overflow: hidden;
  background: #fff2e7;

  .mint-popup {
    border-radius: 15px;
  }
  .rules_content {
    .close {
      position: absolute;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      bottom: -120px;
      img {
        width: 60px;
        height: 60px;
      }
    }
    padding: 60px 40px;
    box-sizing: border-box;
    width: 700px;
    position: relative;
    .des {
      font-size: 28px;
      color: #666;
      line-height: 35px;
    }
    .replenishment {
      margin-top: 40px;
      font-size: 24px;
      color: #999;
      line-height: 35px;
    }
    h3 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 30px;
    }
  }
  .rules {
    position: fixed;
    top: 335px;
    right: 5px;
    background: #ff5aa9;
    width: 56px;
    color: #fff;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
    font-size: 26px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .copyright {
    text-align: center;
    color: #666;
    font-size: 22px;
    margin-top: 20px;
    padding-bottom: 50px;
  }
  .send_full {
    background: url("../../public/imgs/send_full/top_bg.png") no-repeat;
    background-size: 100% 1280px;
    width: 100%;
    height: 1280px;
    box-sizing: border-box;
    padding: 525px 0 0 0;
    .totle {
      text-align: center;
      font-size: 36px;
      color: #ff5aa9;
    }
    .top_title {
      box-sizing: border-box;
      padding: 550px 0 0 0;
      text-align: center;
      .item_name {
        margin-top: 15px;
        .name {
          font-size: 26px;
          color: #333;
        }
      }
      .item_title {
        margin-top: 30px;
        h4 {
          display: inline-block;
          font-size: 30px;
          line-height: 30px;

          span {
            color: #ff5aa9;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    overflow: hidden;
    padding: 0px 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      align-content: space-between;
      width: 50%;
      box-sizing: border-box;
      padding: 0 15px;
      border-radius: 50px;
      margin-bottom: 30px;
      // margin-right: 20px;
      &:nth-child(2n) {
        margin-right: 0px;
      }

      .item_name {
        margin-top: 15px;
        .name {
          font-size: 26px;
          color: #333;
        }
      }
      .item_title {
        margin-top: 30px;
        h4 {
          display: inline-block;
          font-size: 30px;
          line-height: 30px;
          span {
            color: #ff5aa9;
          }
        }
      }
    }
  }
}
</style>
